import React from 'react';
import { Form, Input, Select, Button, message } from 'antd';

const { Option } = Select;

const RechargeUser: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = async (values: any) => {
    console.log('提交的数据:', values);
    const postData = {
      Maney: values.rechargeAmount,
      Remark: values.operationRemarks,
      DepositMethod: values.rechargeMethod,
      userCode: values.userCode,
    };
    try {
      const response = await fetch('http://localhost:5233/api/RechargeUser/AddRechargeUser', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData),
      });
      
      const result = await response.json();
      
      if (response.ok && result.success) {
        message.success('充值信息提交成功!');
        form.resetFields();
      } else {
        message.error(result.message || '充值信息提交失败!');
      }
    } catch (error) {
      console.error('提交失败:', error);
      message.error('提交失败，请检查网络或服务器！');
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('校验失败:', errorInfo);
    message.error('请填写所有必填项！');
  };

  return (
    <Form
      form={form}
      name="recharge_user"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户编码"
        name="userCode"
        rules={[{ required: true, message: '请输入用户编码!' }]}
      >
        <Input placeholder="请输入名称" />
      </Form.Item>

      <Form.Item
        label="充值金额(元)"
        name="rechargeAmount"
        rules={[{ required: true, message: '请输入充值金额!' }]}
      >
        <Input placeholder="请输入名称" />
      </Form.Item>

      <Form.Item
        label="充值方式"
        name="rechargeMethod"
        rules={[{ required: true, message: '请选择充值方式!' }]}
      >
        <Select placeholder="请选择">
          <Option value="cxx测试edit">cxx测试edit</Option>
          <Option value="东子金万于">东子金万于</Option>
          <Option value="支付宝">支付宝</Option>
          <Option value="现金">现金</Option>
          <Option value="Zelle">Zelle</Option>
          <Option value="微信支付">微信支付</Option>
          <Option value="银行汇款">银行汇款</Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="操作备注"
        name="operationRemarks"
        rules={[{ required: true, message: '请输入操作备注!' }]}
      >
        <Input placeholder="请输入操作备注" />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default RechargeUser;
